import React, { Component } from 'react'
import Macy from 'macy'
import axios from "axios"
import withRouter from '../utils/withrouter'
 class Movie extends Component {
  state = {
    arr1:[]
  }
  componentDidMount(){
    console.log(this.props,"22222222222222");
    axios.get("/list").then(res=>{
      this.setState({
        arr1:res.data
      },()=>{
        this.getMacy()
      })
    })
   
  }
  goDetail() {
    this.props.router('/my')
  }
  getMacy = () => {
    if (this.state.masonry) {
      this.state.masonry.reInit()
    } else {
      let masonry = new Macy({
        container: '.macy-container', // 图像列表容器
        trueOrder: false,
        waitForImages: false,
        useOwnImageLoader: false,
        debug: true,
        margin: { x: 55, y: 55 },    // 设计列与列的间距
        columns: 2,    // 设置列数
      })
      this.setState({ masonry })
    }
  }


  render() {
    return (
      <div className='movie' style={{width:"100%",height:"100%"}}>
        <div className='macy-container'> 
        {
          this.state.arr1 && this.state.arr1.length ? this.state.arr1.map((item,index)=>{
            return <div key={index}  onClick={this.goDetail.bind(this)}>
              <img src={item.img} alt="" />
               <p>{item.city}</p>
            </div>
          }):""
        }
        </div>
       
      </div>
    )
  }
}

export default withRouter(Movie)